<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>WebSocket Echo Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <!--    <script src="js/jquery-1.12.3.min.js"></script>-->
    <script>
        var ws = new WebSocket("ws://localhost:8080/websocket");

        ws.onopen = function (e) {
            console.log('Connection to server opened');
        }

        function sendMessage() {
            var value = document.getElementById("message").value;
            ws.send(value);
        }

        ws.onmessage = function (evt) {
            var received_msg = evt.data;
            document.getElementById("receive").value= received_msg;
            alert(received_msg);
        };

        ws.onclose = function () {
            alert("连接已关闭...");
        };

        ws.onerror = function (err) {
            alert("Error: " + err);
        };
    </script>
</head>

<body>
<div class="vertical-center">
    <div class="container">
        <p></p>
        <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
            <div>
                <input type="text" name="message" id="message" value=""/>
            </div>
            <button type="button" id="send"  onclick="sendMessage();">
                Send!
            </button>
            <div>
                <input type="text" name="message" id="receive" value=""/>
            </div>
        </form>
    </div>
</div>
</body>
</html>
